<template>
  <div class="chuangyi" @scroll="gun" ref="gunju">
      
      <div class="centent" v-for="(item,index) in chuangyicontent" :key="index">
        <div class="centent-top">
          <img class="im1" :src="item.author.userinfo.avatar" alt="">
          <span class="sp1">{{item.author.userinfo.username}} 
             <img class="im3" v-if="item.author.userinfo.vip_status===1" src="../assets/vip.png" alt="">
             <span class="sp2" v-if="item.team_user_count!=0">和其他<span class="sp3">{{item.team_user_count}}
             </span>人</span>
          </span>
          
          <div class="centent-left">
            <span class="sp4" v-if="item.author.userinfo.is_vmovier_migrate_user===false">+关注</span>
          <img class="im2" src="../assets/竖着.png" alt="">
          </div>
         
        </div>
        <div class="centent-text">
          <span>{{item.title}}</span>
        </div>

        <div class="centent-audio">

          <img class="im1" :src="item.cover" alt="" @click="tiaomessage(item.id)">
          <div class="centent-bottom">
              <div class="cang">
                <img src="../assets/星星 .png" alt="">
                <span>{{item.count.count_collect}}</span>
              </div>

              <div class="pinglun">
                <img src="../assets/评论小.png" alt="">
                <span>{{item.count.count_comment}}</span>
              </div>

               <div class="zan">
                <img src="../assets/点赞黑.png" alt="">
                <span>{{item.count.count_like}}</span>
              </div>
          </div>
        </div>
      </div>

  </div>
</template>

<script>
export default {
    created(){
        this.getchuangyi()
    },
    data(){
      return{
        text:[],
         chuangyicontent:[]
      }
  },
  methods:{
      //触底的事件
      gun(){
        if(this.$refs.gunju.scrollHeight-Math.ceil(this.$refs.gunju.scrollTop)===this.$refs.gunju.clientHeight){
             this.getchuangyi()
        }
      },
      tiaomessage(id){
        this.$router.push({name:'message',query:{id:id}})
      },

    getchuangyi(){
        this.axios({
            method:'get',
            url:'https://apis.netstart.cn/xpc/home/cateRecommend?cateName=%E6%B7%B7%E5%89%AA',

        }).then(result=>{
             this.text=result.data.data.children
              for(let i =0;i<this.text.length;i++){
                  
                  if(this.text[i].type==="uiBigCard"){
                    this.chuangyicontent.push(this.text[i].children[0].model.resource)
                  }
              }
              
        }).catch(err=>{
           
        })
    }
  }
}
</script>

<style lang="less" scoped>
 .chuangyi{
    width: 95%;
  height: calc(100vh - 94px);
   overflow-y: auto;
   padding :10px;
   background-color: rgb(242, 242, 242);
   .centent{
   width: 100%;
   height: 280px;
   border-radius: 10px;
   margin-top: 10px;
   background-color: white;
    
   .centent-top{
     width: 95%;
     height: 35px;
     display: flex;
     margin-left: 15px;
     line-height: 30px;
     position: relative;
     
     .centent-left{
       position:absolute;
       left: 260px;
     .im2{
       width: 20px;
       height: 25px;
       position: absolute;
       top:3px;
       left: 45px;
     }
      .sp4{
       font-size: 13px;
      
       color: rgb(235,107,99) ;
     }
     }
     .im1{
       width: 30px;
       height: 30px;
       border-radius: 50%;
    
     }
     .im3{
       width: 15px;
       height: 15px;
       position: relative;
       top:2px
     }
    
     .sp1{
       font-size: 15px;
       font-weight: bold;
       color: black;
       margin-left: 5px;
        text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
     }
    
   }
   .centent-text{
     width: 90%;
     height: 35px;
     line-height: 35px;
    
     margin-left: 15px;
     span{
       font-size: 15px;
       font-weight: bold;
        text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
     }
   }

   .centent-audio{
     width: 100%;
     height: 210px;
    
     
     .im1{
       width: 100%;
       height: 170px;
       
     
     }
     .centent-bottom{
       width: 100%;
       height: 30px;
       margin-top: 10px;
       display: flex;
       justify-content: center;
       .cang{
         width: 33%;
         height: 30px;
         display: flex;
         justify-content: center;
         img{
           width: 15px;
           height: 15px;
         }
        span{
           margin-top: 2px;
           margin-left: 5px;
         }
       }

       .pinglun{
         width: 33%;
         height: 30px;
         display: flex;
          justify-content: center;
         img{
           width: 15px;
           height: 15px;
         }
         span{
           margin-top: 2px;
           margin-left: 5px;
         }
       }

       .zan{
         width: 33%;
         height: 30px;
         display: flex;
          justify-content: center;
         img{
           width: 15px;
           height: 15px;
         }
          span{
           margin-top: 2px;
           margin-left: 5px;
         }
       }
     }
   }
 }
}
</style>